import React from 'react';
import './index.css'; // 导入样式
import avatar from './images/avatar.jpeg'; // 导入图片

export class Comments extends React.Component {
  // 定义组件的数据
  constructor() {
    super();
    this.state = {
      // hot: 热度排序  time: 时间排序
      tabs: [
        {
          id: 1,
          name: '热度',
          type: 'hot',
        },
        {
          id: 2,
          name: '时间',
          type: 'time',
        },
      ],
      active: 'hot',
      list: [
        {
          id: 1,
          author: '刘德华',
          comment: '给我一杯忘情水',
          time: new Date('2021-10-10 09:09:00'),
          // 1: 点赞 0：无态度 -1:踩
          attitude: 1,
        },
        {
          id: 2,
          author: '周杰伦',
          comment: '哎哟，不错哦',
          time: new Date('2021-10-11 09:09:00'),
          // 1: 点赞 0：无态度 -1:踩
          attitude: 0,
        },
        {
          id: 3,
          author: '五月天',
          comment: '不打扰，是我的温柔',
          time: new Date('2021-10-11 10:09:00'),
          // 1: 点赞 0：无态度 -1:踩
          attitude: -1,
        },
      ],
    };
  }

  render() {
    return (
      <div className="comment-root">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-number">
            <span>{this.state.list.length} 评论</span>
          </div>

          {/* 排序tab */}
          <div className="tabs-order">
            {/* 类on选中效果 */}
            {/* <div className="on">按xx排序</div>
            <div>按yy排序</div> */}
            {this.state.tabs.map((item) => {
              return (
                <div
                  className={item.type === this.state.active ? 'on' : ''}
                  key={item.id}
                >
                  按{item.name}排序
                </div>
              );
            })}
          </div>

          {/* 发表评论区 */}
          <div className="comment-send-container">
            <div>
              <img className="user-head" src={avatar} alt="头像" />
            </div>
            <div className="comment-send">
              <div className="textarea-container">
                <textarea
                  cols="80"
                  rows="5"
                  placeholder="发条友善的评论"
                  className="ipt-txt"
                />
                <button className="comment-submit">发表评论</button>
              </div>
              <div className="comment-emoji">
                <i className="face"></i>
                <span className="text">表情</span>
              </div>
            </div>
          </div>

          {/* 评论列表区 */}
          <div className="comment-list">
            {this.state.list.map((item) => {
              return (
                <div key={item.id} className="comment-item">
                  <div>
                    <img className="user-head" src={avatar} alt="头像" />
                  </div>

                  <div className="comment">
                    {/* 评论人 */}
                    <div className="user">{item.author}</div>
                    {/* 评论内容 */}
                    <p className="text">{item.comment}</p>
                    <div className="info">
                      <span className="time">{item.time.toLocaleString()}</span>
                      <span
                        className={item.attitude === 1 ? 'like liked' : 'like'}
                      >
                        <i className="icon" />
                      </span>
                      <span
                        className={item.attitude === -1 ? 'hate hated' : 'hate'}
                      >
                        <i className="icon" />
                      </span>
                      <span className="btn-hover">删除</span>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

export default Comments;
